<template>
  <div class="app-container">
    <!-- 查询start -->
    <div class="filter-container">
      <el-input v-model="queryParams.orderNumber" placeholder="订单号" style="width: 200px;" class="filter-item" />
      <el-input v-model="queryParams.userId" placeholder="User ID" style="width: 200px;" class="filter-item" />
      <el-input v-model="queryParams.email" placeholder="电子邮箱" style="width: 200px;" class="filter-item" />
      <el-select v-model="queryParams.orderState" placeholder="订单状态" clearable style="width: 200px" class="filter-item">
        <el-option
          v-for="item in orderStates"
          :key="item.id"
          :label="item.text"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="queryParams.product" placeholder="产品" clearable style="width: 200px" class="filter-item">
        <el-option
          v-for="item in productList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <!-- 查询end -->
    <table-model ref="tableModel" :page-fun="getPage" :is-load="true" :handler-data="handelData" style="margin-top: 10px" :columns="columns" />
  </div>
</template>

<script>
import { getList as getProductList, getOrderPage } from '@/api/product'
import tableModel from '@/components/Table'
import { formatDate } from '@/utils'

export default {
  components: { tableModel },
  data() {
    return {
      queryParams: {
        email: '',
        userId: '',
        orderNumber: '',
        orderState: '',
        product: '',
        page: 1,
        pageSize: 10
      },
      productList: [],
      orderStates: [
        {
          id: 0,
          text: '待支付'
        },
        {
          id: 1,
          text: '已完成'
        }
      ],
      columns: [
        {
          text: '订单ID',
          value: 'id'
        },
        {
          text: 'User Id',
          value: 'userId'
        },
        {
          text: '电子邮箱',
          value: 'email'
        },
        {
          text: '订单号',
          value: 'orderNumber'
        },
        {
          text: '产品名称',
          value: 'productName'
        },
        {
          text: '数量',
          value: 'qty'
        },
        {
          text: '付款金额',
          value: 'price'
        },
        {
          text: '产品金额',
          value: 'productPrice'
        },
        {
          text: '订单状态',
          value: 'orderState'
        },
        {
          text: '创建时间',
          value: 'createTime'
        },
        {
          text: '完成时间',
          value: 'updateTime'
        }
      ]
    }
  },
  created() {
    getProductList().then(response => {
      this.productList = response.data
    })
  },
  methods: {
    // 分页方法
    getPage(params) {
      return new Promise((resolve, reject) => {
        getOrderPage(params).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }, // 调用table-model的分页方法
    fetchData() {
      this.$refs.tableModel.getPage(this.queryParams)
    },
    search() {
      this.queryParams.page = 1
      this.fetchData()
    },
    // 操作表格数据
    handelData(data) {
      data.forEach(d => {
        d.qty = d.qty + ' Months'
        d.productPrice = '$' + d.productPrice
        d.price = '$' + d.price
        d.createTime = d.createTime === null ? '' : formatDate(d.createTime, 'yyyy-MM-dd hh:mm:ss')
        if (d.orderState === 1) {
          d.updateTime = d.updateTime === null ? '' : formatDate(d.updateTime, 'yyyy-MM-dd hh:mm:ss')
        } else {
          d.updateTime = ''
        }

        d.orderState = d.orderState === 0 ? '待支付' : '已完成'
      })
      return data
    }
  }
}
</script>
